<template>
  <div :key="brder1Key" class="flex-x flex-space statistics_list">
    <dv-border-box-12
      v-for="(item, index) in numberList"
      :key="index"
      style="width: 16%"
    >
      <div class="statistics_list_item flex-y flex-center">
        <div style="color: #3de7c9; font-size: 20px; margin-bottom: 4px">
          {{ item.name }}
        </div>
        <dv-digital-flop
          v-if="item.config.number.length"
          :config="item.config"
          style="width: 200px; height: 30px"
        />
        <div v-else style="color: #3de7c9; font-size: 20px; margin-bottom: 4px">
          --
        </div>
      </div>
    </dv-border-box-12>
  </div>
</template>

<script>
import { getCentralizedStats } from "@/api/centralized";
import { generateId } from "@/utils";
export default {
  data() {
    return {
      numberList: [
        {
          key: "deviceCount",
          name: "接入设备数",
          config: {
            number: [70]
            // content: "{nt}个",
          }
        },
        {
          name: "空闲设备数",
          key: "freeDeviceCount",
          config: {
            number: [12]
          }
        },
        {
          name: "报警设备数",
          key: "alarmDeviceCount",
          config: {
            number: [0]
          }
        },
        {
          name: "设备稼动率(%)",
          key: "deviceActivation",
          config: {
            number: [66.2]
            // content: "{nt}%",
          }
        },
        {
          name: "总功率(kW)",
          key: "totalPower",
          config: {
            number: []
          }
        },
        {
          name: "当日耗能(kWh)",
          key: "dayEnergy",
          config: {
            number: []
          }
        }
      ],
      config1: {
        number: [0]
        // content: "{nt}个",
      },
      brder1Key: generateId()
    };
  },
  watch: {
    // 有bug 晚点改
    "$store.state.app.sidebar.opened"() {
      setTimeout(() => {
        // this.init();
        this.brder1Key = generateId();
      }, 400);
    }
  },
  async mounted() {
    this.getCentralizedStats();
  },
  methods: {
    // 获取统计信息
    async getCentralizedStats() {
      const res = await getCentralizedStats();
      const { results } = res.data;
      if (results && results.length) {
        this.numberList.forEach(item => {
          item.config.number = [results[0][item.key]];
          this.$set(item, "config", { ...item.config }); // 对象解构，更新props
        });
      }
    }
  }
};
</script>

<style lang="scss">
.statistics_list {
  width: 100%;
  padding: 0 30px;

  &_item {
    padding: 14px 0;
  }
}
</style>
